<template>
  <div>
    <van-cell-group
      inset
      title="姓名"
    >
      <van-field
        id="name"
        v-model="name"
        :value="name"
        placeholder="请输入姓名"
        :focus="errorFocusAttribute==='name'"
        :error="!!errorMessage.name"
        :border="true"
        @change="onChangeInput"
      />
    </van-cell-group>

    <van-cell-group
      inset
      title="会员号"
    >
      <van-field
        id="lntsno"
        v-model="lntsno"
        :value="lntsno"
        placeholder="请输入会员号"
        :focus="errorFocusAttribute==='lntsno'"
        :error="!!errorMessage.lntsno"
        :border="true"
        @change="onChangeInput"
      />
    </van-cell-group>

    <van-cell-group
      inset
      title="年票号"
    >
      <van-field
        id="year"
        v-model="year"
        :value="year"
        placeholder="请输入年票号"
        :focus="errorFocusAttribute==='year'"
        :error="!!errorMessage.year"
        :border="false"
        @change="onChangeInput"
      />
    </van-cell-group>
    <div class="radio-auth-title">认证方式</div>
    <van-radio-group
      class="radio-auth-type"
      v-model="checked"
      direction="horizontal"
      @change="onChange"
    >
      <van-radio name="0">普通认证</van-radio>
      <van-radio name="1">永久认证</van-radio>
    </van-radio-group>

    <van-button
      class="btn-commit"
      type="primary"
      color="#ee732f"
      @click="getData"
      block
    >提交</van-button>
  </div>
</template>

<script>
export default {
  components: {
  },

  data () {
    return {
      checked: '0',
      formData: {
        name: '',
        lntsno: '',
        year: '',
        type: ''
      },
      errorFocusAttribute: '',
      errorMessage: {
        name: '',
        lntsno: '',
        year: ''
      },
      fieldOptions: {
        name: {
          error: false,
          errorMessage: '请输入姓名',
          required: true
        },
        lntsno: {
          error: false,
          errorMessage: '请输入会员号',
          required: true
        },
        year: {
          error: false,
          errorMessage: '请输入年票号',
          required: true
        }
      }
    }
  },
  onLoad () {
    Object.assign(this.$data, this.$options.data())
    console.log(this.formData)
  },
  onShow () {
    this.onLoadData()
  },
  methods: {
    onLoadData () {

    },
    onChange (e) {
      console.log(e.mp.detail)
      // this.checked = e.mp.detail
      this.formData.type = e.mp.detail
    },
    onChangeInput (e) {
      const key = e.mp.target.id
      if (key !== this.errorFocusAttribute) {
        this.errorFocusAttribute = key
      }
      if (Object.prototype.hasOwnProperty.call(this.formData, key)) {
        this.formData[key] = e.mp.detail
      }
    },
    validateAttributes () {
      let hasError = false
      const data = this.formData
      let options = this.fieldOptions
      for (let attribute in data) {
        if (Object.prototype.hasOwnProperty.call(options, attribute)) {
          let fieldRule = options[attribute]
          if (this.validateAttribute(fieldRule, attribute)) {
            fieldRule.error = false
            this.errorMessage[attribute] = ''
          } else {
            fieldRule.error = true
            this.errorMessage[attribute] = fieldRule.errorMessage
            if (!hasError) {
              hasError = true
              this.errorFocusAttribute = attribute
            }
            break
          }
        }
      }
      return !hasError
    },
    validateAttribute (rule, name) {
      const attributeData = this.formData[name]
      if (rule.required && !attributeData) {
        return false
      } else if (rule.callback) {
        const validated = rule.callback(attributeData, this.formData)
        console.log('callback validated', validated)
        return validated
      } else {
        return true
      }
    },
    getData () {
      if (!this.validateAttributes()) {
        wx.showToast({
          title: this.errorMessage[this.errorFocusAttribute],
          icon: 'none',
          duration: 2000
        })
        return
      }
      this.$emit('submit', this.formData)
    }
  }
}
</script>

<style lang="less">
.btn-commit {
  padding: 20px 10px;
}
.radio-auth-title {
  padding: 15px 10px 0px 15px;
  font-size: 12px;
  color: #888;
}
.radio-auth-type {
  margin: 10px 15px 10px 25px;
}
</style>
